<!--
 @description 销售开单办事处数据详情
 @fileName OfficeMap.vue
 @author zengqiongying
 @created 2021/05/21 14:36:47
-->
<template>
  <div>
    <div class="dlg-title">
      <span>{{ detailData.officeName }}</span>
    </div>
    <!-- <div class="office-name">{{ detailData.officeName }}<svg-icon icon-class="xiangyou" /></div> -->
    <div class="data-list">
      <div class="item-wrap" @click="handleOfficeDetail">
        <span class="name">销售开单(车)</span>
        <span class="number color-red">{{ detailData.saleCount || 0 }}</span>
        <svg-icon icon-class="xiangyou" />
      </div>
      <div v-if="detailData.careQuantity" class="item-wrap" @click="handleOfficeDetail">
        <span class="name">订单配车(车)</span>
        <span class="number color-blue">{{ detailData.careQuantity || 0 }}</span>
        <svg-icon icon-class="xiangyou" />
      </div>
      <div v-if="detailData.shipQuantity" class="item-wrap" @click="handleOfficeDetail">
        <span class="name">物流启运(车)</span>
        <span class="number color-green">{{ detailData.shipQuantity || 0 }}</span>
        <svg-icon icon-class="xiangyou" />
      </div>
      <div style="color:#999;font-size:12px;text-align:center;padding-top:10px">点击行查看对应数据详情</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapDetail',
  props: {
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {

    }
  },
  created() {},
  methods: {
    handleOfficeDetail() {
      const shortName = this.detailData.officeName.replace('直营办事处', '办')
        .replace('独资办事处', '办')
        .replace('销售公司', '')
      this.$router.push({ name: 'saleOffice', query: { provinceName: this.detailData.name, officeName: this.detailData.officeName, pageTitle: `${shortName}-销售开单` }})
    }
  }
}

</script>
<style lang='less' scoped>
  .dlg-title{
    margin-bottom: 10px;
    padding:10px 0;
    line-height: 22px;
    border-bottom: 1px solid #F4F6F5;
    color: #333;
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
    font-family: 'PFZH';
  }
  .office-name{
    width: 100%;
    margin-bottom:10px;
    padding-left: 15px;
    height: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: 'PFZH';
    letter-spacing: 1px;
    color: #333333;
    font-size: 14px;
    .svg-icon{
      font-size: 16px;
    }
  }
  .data-list{
    padding-bottom: 15px;
    min-height: 44px;
    letter-spacing: 1px;
    color: #333333;
    font-size: 14px;
    .item-wrap{
      padding: 0 15px 0 33px;
      height: 44px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #F5F6F7;
      &::before{
        content: '';
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: #DDDDDD;
        border-radius: 50%;
      }
      &:nth-child(2n){
        background: #FFF;
      }
      .name{
        flex: 1;
       }
      .number{
        margin-left: 10px;
        padding-right: 10px;
      }
      .svg-icon{
        font-size: 18px;
        color: #D8D8D8;
      }
    }
  }
</style>
